<template>
	<view class="swiper-wrap" :animation="animationData">
		<!-- 轮播容器：每屏显示2张，循环滚动，间距10px -->
		<swiper class="swiper" circular @change="handleSwiperChange" autoplay interval="6000">
			<!-- 遍历图片数据，动态计算每项宽度 -->
			<swiper-item v-for="(item, index) in swiperList" :key="index" class="swiper-item">
				<image :src="item.image" class="image" mode="aspectFill" />
			</swiper-item>
		</swiper>
		<!-- 指示器：显示当前激活项 -->		
		<view class="indicator">
			<text class="indicator-text">{{ currentIndex + 1 }} / {{ swiperList.length }}</text>
		</view>		
	</view>
</template>

<script>
	export default {
		props: {
			// 动画
			animationData: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				swiperList: [ // 图片数据源
					{
						image: '/static/images/products/8.jpg'
					},
					{
						image: '/static/images/products/7.jpg'
					},
					{
						image: '/static/images/products/3.png'
					},
					{
						image: '/static/images/products/4.png'
					}
				],
				currentIndex: 0, // 当前激活项索引
				spacing: 12, // 图片间距
				screenWidth: 375 // 屏幕宽度（需动态获取）
			};
		},
		computed: {},
		mounted() {
			// 获取屏幕宽度（兼容H5和小程序）
			uni.getSystemInfo({
				success: (res) => {
					this.screenWidth = res.windowWidth;
				}
			});
		},
		methods: {
			// 轮播切换事件
			handleSwiperChange(e) {
				this.currentIndex = e.detail.current;
			}
		}
	};
</script>

<style scoped>
	.swiper-wrap {
		position: relative;
	}

	.swiper {
		/* 轮播高度 */
		height: 550rpx;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
	}

	.image {
		width: 100%;
		height: 100%;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}

	.indicator {
		position: absolute;
		bottom: 20px;
		left: 0;
		right: 0;
		text-align: center;
	}

	.indicator-text {
		background: rgba(0, 0, 0, 0.5);
		color: white;
		padding: 2px 10px;
		border-radius: 10px;
		font-size: 12px;
	}
</style>